<template>
  <div class="source">
    <div class="flow-title">
      <div class="flow-title-left">
        <div class="line" />
        <div class="text">
          {{ $t('dataAnalysis.dealTrans') }}
        </div>
      </div>
    </div>

    <!-- 多项选择 -->
    <div class="radio-box flow-form">
      <el-form
        :model="form"
        @submit.prevent
      >
        <el-form-item :label="$t('dataAnalysis.pageBrowsing')">
          <el-checkbox-group v-model="form.saleIndex">
            <el-checkbox
              class="checkbox-item"
              name="saleIndex"
              :label="$t('dataAnalysis.perVisitor')"
              checked
            />
            <el-checkbox
              class="checkbox-item"
              name="saleIndex"
              :label="$t('dataAnalysis.numberOfVisitors')"
              checked
            />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          :label="$t('dataAnalysis.dealTrans') + ':'"
          width="300px"
        >
          <el-checkbox-group v-model="form.serviceIndex">
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.uvPrice')"
            />
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.addCartNumbers')"
            />
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.paidPeoples')"
            />
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.paidAmount')"
              checked
            />
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.visitOrder')"
            />
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.paidNumbers')"
            />
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.paymentAmount')"
              checked
            />
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.vToP')"
            />
            <el-checkbox
              name="saleIndex"
              :label="$t('dataAnalysis.customerUnitPrice')"
            />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          :label="$t('dataAnalysis.dealTrans') + ':'"
          class="hide-label"
        >
          <div
            class="limit-num"
            :class="{'out-limit': outLimit}"
          >
            <span id="maxSelectSpan">{{ $t('dataAnalysis.upTo5') }}</span>
            {{ $t('dataAnalysis.selected') }}
            <span class="item-num">{{ selectNum }}</span>/{{ $t('dataAnalysis.fiveItems') }}
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- /多项选择 -->
    <!--告示-->
    <div class="notice">
      <p>{{ $t('dataAnalysis.notice1') }}</p>{{ $t('dataAnalysis.notice2') }}
    </div>
    <!--告示-->
    <!-- 表格 -->
    <div class="table-con">
      <el-table
        :data="tableData"
        header-cell-class-name="table-header"
        row-class-name="table-row-low"
      >
        <el-table-column
          prop="prodInfo"
          :label="$t('dataAnalysis.sourceType')"
          fixed="left"
        />
        <el-table-column
          v-if="tableItemShow.isVisible1"
          class="table-item"
          prop="userNumsRatio"
          :label="$t('dataAnalysis.perVisitor')"
          sortable
        />
        <el-table-column
          v-if="tableItemShow.isVisible2"
          class="table-item"
          prop="userNums"
          :label="$t('dataAnalysis.numberOfVisitors')"
          sortable
        />
        <el-table-column
          v-if="tableItemShow.isVisible3"
          class="table-item"
          prop="uvprice"
          :label="$t('dataAnalysis.uvPrice')"
          sortable
        />
        <el-table-column
          v-if="tableItemShow.isVisible4"
          class="table-item"
          prop="plusShopCartUser"
          :label="$t('dataAnalysis.addCartNumbers')"
          sortable
        />
        <el-table-column
          v-if="tableItemShow.isVisible5"
          class="table-item"
          prop="placeOrderUser"
          :label="$t('dataAnalysis.paidPeoples')"
          sortable
        />
        <el-table-column
          v-if="tableItemShow.isVisible6"
          class="table-item"
          prop="placeOrderAmount"
          :label="$t('dataAnalysis.paidAmount')"
          sortable
        />
        <el-table-column
          v-if="tableItemShow.isVisible7"
          class="table-item"
          prop="placeOrderRate"
          :label="$t('dataAnalysis.visitOrder')"
          sortable
        />
        <el-table-column
          v-if="tableItemShow.isVisible8"
          class="table-item"
          prop="payUser"
          :label="$t('dataAnalysis.paidNumbers')"
          sortable
        />
        <el-table-column
          v-if="tableItemShow.isVisible9"
          class="table-item"
          prop="payAmount"
          :label="$t('dataAnalysis.paymentAmount')"
          sortable
        />
        <el-table-column
          v-if="tableItemShow.isVisible10"
          class="table-item"
          prop="payRate"
          :label="$t('dataAnalysis.vToP')"
          sortable
        />
        <el-table-column
          v-if="tableItemShow.isVisible11"
          class="table-item"
          prop="customerPrice"
          :label="$t('dataAnalysis.customerUnitPrice')"
          sortable
        />
      </el-table>
    </div>
    <!-- /表格 -->
  </div>
</template>

<script setup>
const props = defineProps({
  startTime: {
    default: '',
    type: String
  },
  timeType: {
    default: 0,
    type: Number
  }
})
const outLimit = ref(false) // 判断是否选中数量超过限制数量

const form = reactive({
  saleIndex: [], // 游览访问
  serviceIndex: [] // 成交转化
})
const selectNum = ref(0) // 选择指标的数量s
const sumData = ref([]) // 所有指标
const tableItemShow = reactive({
  isVisible1: false,
  isVisible2: false,
  isVisible3: false,
  isVisible4: false,
  isVisible5: false,
  isVisible6: false,
  isVisible7: false,
  isVisible8: false,
  isVisible9: false,
  isVisible10: false,
  isVisible11: false,
  isVisible12: false
})

onMounted(() => {
  getFlowSour()
})

const tableData = ref([])
const systemTypeName = [$t('date.a'), 'PC', 'H5', $t('sysManagement.miniPrograms'), $t('dataAnalysis.android'), 'IOS'] // 0 1 2 3 4 5
const getFlowSour = () => {
  http({
    url: http.adornUrl('/admin/flowAnalysis/flowSour'),
    method: 'get',
    params: http.adornParams({
      start: !props.startTime ? null : props.startTime,
      timeType: props.timeType
    })
  }).then(({ data }) => {
    if (data) {
      let name = null
      tableData.value = []
      for (let i = 0; i < data.length; i++) {
        name = systemTypeName[data[i].systemType]
        data[i].prodInfo = name
        data[i].userNumsRatio = (data[i].userNumsRatio * 100).toFixed(2) + '%'
        data[i].placeOrderRate = (data[i].placeOrderRate * 100).toFixed(2) + '%'
        data[i].payRate = (data[i].payRate * 100).toFixed(2) + '%'
        tableData.value.push(data[i])
      }
    }
  })
}
/**
 * 文字效果
 */
const textShare = (div, color) => {
  div.style.color = color
}
/**
 * 控制表格列显隐
 */
const changVisibles = () => {
  tableItemShow.isVisible1 = judgeStrArrIncludeOtherString($t('dataAnalysis.perVisitor'))
  tableItemShow.isVisible2 = judgeStrArrIncludeOtherString($t('dataAnalysis.numberOfVisitors'))
  tableItemShow.isVisible3 = judgeStrArrIncludeOtherString($t('dataAnalysis.uvPrice'))
  tableItemShow.isVisible4 = judgeStrArrIncludeOtherString($t('dataAnalysis.addCartNumbers'))
  tableItemShow.isVisible5 = judgeStrArrIncludeOtherString($t('dataAnalysis.paidPeoples'))
  tableItemShow.isVisible6 = judgeStrArrIncludeOtherString($t('dataAnalysis.paidAmount'))
  tableItemShow.isVisible7 = judgeStrArrIncludeOtherString($t('dataAnalysis.visitOrder'))
  tableItemShow.isVisible8 = judgeStrArrIncludeOtherString($t('dataAnalysis.paidNumbers'))
  tableItemShow.isVisible9 = judgeStrArrIncludeOtherString($t('dataAnalysis.paymentAmount'))
  tableItemShow.isVisible10 = judgeStrArrIncludeOtherString($t('dataAnalysis.vToP'))
  tableItemShow.isVisible11 = judgeStrArrIncludeOtherString($t('dataAnalysis.customerUnitPrice'))
}
const judgeStrArrIncludeOtherString = (str) => {
  const strArr = sumData.value
  return strArr.includes(str)
}

watch([() => props.startTime, () => props.timeType],
  () => {
    getFlowSour()
  })

// 第三部分的最多项多选款监听
watch(() => form.saleIndex, () => {
  selectNum.value = form.saleIndex.length + form.serviceIndex.length
  // sumData是用来存放点击选中的文本框信息
  sumData.value = []
  sumData.value = sumData.value.concat(form.saleIndex).concat(form.serviceIndex)
  const checks = document.getElementsByName('saleIndex')
  const span = document.getElementById('maxSelectSpan')
  checks.forEach(i => {
    if (selectNum.value >= 5) {
      textShare(span, 'red')
      if (!i.checked) {
        i.setAttribute('disabled', 'true')
      }
    }
  })
  if (selectNum.value < 5) {
    textShare(span, 'grey')
    checks.forEach(i => {
      i.removeAttribute('disabled')
    })
  }
}, {
  deep: true
})
watch(() => form.serviceIndex, () => {
  selectNum.value = form.saleIndex.length + form.serviceIndex.length
  // debugger
  sumData.value = []
  sumData.value = sumData.value.concat(form.saleIndex).concat(form.serviceIndex)
  const checks = document.getElementsByName('saleIndex')
  const span = document.getElementById('maxSelectSpan')
  checks.forEach(i => {
    if (selectNum.value >= 5) {
      textShare(span, 'red')
      if (!i.checked) {
        i.setAttribute('disabled', 'true')
      }
    }
  })
  if (selectNum.value < 5) {
    textShare(span, 'grey')
    checks.forEach(i => {
      i.removeAttribute('disabled')
    })
  }
}, {
  deep: true
})

// 将存放的选择框数据调用函数来执行数据响应展示操作
watch(() => sumData.value, () => {
  changVisibles()
})
</script>

<style lang="scss" scoped>
 @use '../index.scss';
.source {
  .flow-form {
    border-bottom: 1px solid #eee;
    .hide-label {
      ::v-deep(.el-form-item__label) {
        color: transparent;
      }
    }
  }
  .table-con {
    border: 1px solid #eee;
    border-bottom: none;
  }

  /* /多项选择 */

  /* 告示 */
  .notice {
    margin: 30px 0 20px 0;
    font-size: 14px;
    color: #666;
    line-height: 19px;
  }
  .notice p {
    margin-bottom: 8px;
  }
  /* /告示 */
}
 div :deep(.el-checkbox__input.is-checked) .el-checkbox__inner {
    border-color: #155bd4;
    background: #155bd4;
  }
 div :deep(.el-checkbox__input.is-checked) + .el-checkbox__label {
    color: #155bd4;
  }
</style>
